<!-- 历史工单 -->
<template>
  <div class="map">
    <div class="maxWidth">
      <div class="mapOut">
        <div id="container"></div>
        <div @click="fullScreen" class="fullScreen">
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;全屏 <iconpark-icon size="16" name="quanping"></iconpark-icon>
        </div>
      </div>
    </div>
    <div class="orderRight">
      <div class="dcl">
        <span>待处理</span>
        <div class="line"></div>
        <div class="dclCon">
          <p>莲湖区康复路管线运营二号线待维修</p>
          <p>莲湖区康复路管线运营二号线待维修</p>
          <p>莲湖区康复路管线运营二号线待维修</p>
          <p>莲湖区康复路管线运营二号线待维修</p>
          <p>莲湖区康复路管线运营二号线待维修</p>
        </div>
      </div>
      <div class="ycl">
        <span>已处理</span>
        <div class="line"></div>
        <div class="yclCon">
          <p>莲湖区康复路管线运营二号线待维修</p>
          <p>莲湖区康复路管线运营二号线待维修</p>
          <p>莲湖区康复路管线运营二号线待维修</p>
          <p>莲湖区康复路管线运营二号线待维修</p>
          <p>莲湖区康复路管线运营二号线待维修</p>
        </div>
      </div>
      <div class="bxlczb" id="bxlczb"></div>
      <div class="gdtj" id="gdtj"></div>
      <div class="ygdsltj" id="monTraffic"></div>
    </div>
  </div>
</template>
<script>
import { mapActions, mapState } from "vuex";
import pic1 from "../../../mapIcon/marker.png";
// import './map'
export default {
  name: "HistoryOrder",
  data() {
    return {
      startWidth: 0,
      WidthMin: 0,
      WidthMax: 0,
      WidthEms:49.5,
      timer: null,
      isFull: false,
      zoom: 0,
      map: {},
      p1AddrssList: [
        { x: 108.972911, y: 34.230771 },
        { x: 108.979738, y: 34.225517 },
        { x: 108.982397, y: 34.222174 },
        { x: 108.965836, y: 34.225607 },
      ],
      p2AddrssList: [
        { x: 108.895585, y: 34.194947 },
        { x: 108.902197, y: 34.202711 },
        { x: 108.934679, y: 34.210952 },
        { x: 108.952789, y: 34.194352 },
        { x: 108.982397, y: 34.193395 },
        { x: 109.010712, y: 34.203427 },
        { x: 108.994327, y: 34.222413 },
        { x: 108.970755, y: 34.224204 },
      ],
      p2AddrssListColor: [
        {
          geometry: {
            type: "LineString",
            coordinates: [
              [108.895585, 34.194947],
              [108.902197, 34.202711],
              [108.934679, 34.210952],
              [108.952789, 34.194352],
              [108.982397, 34.193395],
              [109.010712, 34.203427],
              [108.994327, 34.222413],
              [108.970755, 34.224204],
            ],
          },
        },
      ],
    };
  },
  methods: {
    ...mapActions("gismanage", ["actionGetCoordLinat"]),
    // 全屏事件
    fullScreen() {
      let menu = document.querySelector(".map");
      let mapOut = document.querySelector(".mapOut");
      this.WidthMax = menu.offsetWidth;
      console.dir("最大", mapOut);
      if (!this.isFull) {
        this.mapDom = document.getElementById("container");
        this.startWidth = this.mapDom.offsetWidth;
        //清除定时器
        clearInterval(this.timer);
        // 不是全屏变全屏
        this.timer = setInterval(() => {
          this.addOrEditWid(mapOut, this.startWidth, this.WidthMax, 20);
          // this.map.centerAndZoom(this.point, 13);
          // console.log(1);
        }, 30);
        this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        this.isFull = !this.isFull;
      } else {
        //清除定时器
        clearInterval(this.timer);
        // 全屏变半屏
        this.timer = setInterval(() => {
          this.addOrEditWid(mapOut, this.startWidth, this.WidthMax, -20);
          // this.map.centerAndZoom(this.point, 13);
          // console.log(1);
        }, 30);
        this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
        this.isFull = !this.isFull;
      }
    },
    addOrEditWid(dom, iWidthMin, iWidthMax, iSpeed) {
      dom.style.display = "block";
      if (iSpeed > 0) {
        // 变宽
        if (this.WidthEms < 100) {
          //dom.style.width = dom.offsetWidth + iSpeed + "px";
           this.WidthEms = this.WidthEms + 0.5;
           dom.style.width = this.WidthEms + "%" ;
           
        }
      } else {
        if (this.WidthEms > 49.5) {
          //dom.style.width = dom.offsetWidth + iSpeed + "px";
          this.WidthEms = this.WidthEms - 0.5;
          dom.style.width = this.WidthEms + "%" ;
        }
      }
    },
    createDOM(config) {
      var canvas = document.createElement("canvas");
      var context = canvas.getContext("2d");
      var radius = 10;
      //创建构造函数Circle
      function Circle(x, y, radius) {
        this.xx = x; //在画布内随机生成x值
        this.yy = y;
        this.radius = radius;
      }
      Circle.prototype.radiu = function () {
        radius += 0.5; //每一帧半径增加0.5
        if (this.radius >= 20) {
          radius = 10;
        }
      };
      // 绘制圆形的方法
      Circle.prototype.paint = function () {
        context.beginPath();
        context.arc(this.xx, this.yy, 5, 0, Math.PI * 2);
        context.fillStyle = "rgba(220,20,60,1)"; //填充颜色,默认是黑色
        context.fill(); //画实心圆
        context.closePath();
        context.lineWidth = 2; //线条宽度
        context.strokeStyle = "rgba(220,20,60,1)"; //颜色
        context.stroke();
        this.paintkong();
        this.paintkong(0);
        this.paintkong(5);
        this.paintkong(10);
      };
      Circle.prototype.paintkong = function (num) {
        context.beginPath();
        context.arc(this.xx, this.yy, this.radius + num, 0, Math.PI * 2);
        context.closePath();
        context.lineWidth = 1; //线条宽度
        context.strokeStyle = "rgba(220,20,60,1)"; //颜色
        context.stroke();
      };
      var newfun = null;
      function createCircles() {
        newfun = new Circle(50, 50, radius); //调用构造函数
        newfun.paint();
        newfun.radiu();
      }
      canvas.width = 100; //
      canvas.height = 100;
      var width = 100,
        height = 100;
      var backCanvas = document.createElement("canvas"),
        backCtx = backCanvas.getContext("2d");
      backCanvas.width = width;
      backCanvas.height = height;
      //设置主canvas的绘制透明度
      context.globalAlpha = 0.7;
      //显示即将绘制的图像，忽略临时canvas中已存在的图像
      backCtx.globalCompositeOperation = "copy";
      let render = function () {
        //先将主canvas的图像缓存到临时canvas中
        backCtx.drawImage(canvas, 0, 0, width, height);
        //清除主canvas上的图像
        context.clearRect(0, 0, width, height);
        //在主canvas上画新圆
        createCircles();
        //新圆画完后，再把临时canvas的图像绘制回主canvas中
        context.drawImage(backCanvas, 0, 0, width, height);
      };
      setInterval(render, 100);
      return canvas;
    },
    getP1Point() {
      this.p1AddrssList.forEach((item) => {
        let poi = new BMapGL.Point(item.x, item.y);
        var customOverlay = new BMapGL.CustomOverlay(this.createDOM, {
          point: poi,
          offsetX: 0,
          offsetY: 0,
          minZoom: 13,
          maxZoom: 19,
          properties: {
            width: 50,
            height: 50,
            radius: 50,
            lineWidth: 20,
            data: 2,
          },
        });
        this.map.addOverlay(customOverlay);
      });
    },
    getP2Line() {
      let view = new mapvgl.View({
        map: this.map,
      });
      let listData = this.coordLinat;
      listData.forEach((item) => {
        console.log("item", item);
        let lineLayerRode = null;
        let lineLayer = null;
        // if (item.DevicePipeline.ptype == "DN200") {
        //   lineLayerRode = new mapvgl.LineLayer({
        //     style: "normal", // road, arrow, normal
        //     width: 2,
        //     color: "skyblue",
        //     enablePicked: true,
        //   });
        //   lineLayer = new mapvgl.LineLayer({
        //     // style: "road", // road, arrow, normal
        //     width: 2,
        //     color: "blue",
        //     animation: true,
        //     duration: 0.5, // 循环时间2s
        //     trailLength: 0.9, // 拖尾长度占间隔的0.4
        //     interval: 0.2, // 粒子长度占线整体长度的0.2
        //     // enablePicked: true,
        //   });
        // } else if (item.DevicePipeline.ptype == "DN300") {
        //   lineLayerRode = new mapvgl.LineLayer({
        //     style: "normal", // road, arrow, normal
        //     width: 3,
        //     color: "skyblue",
        //     enablePicked: true,
        //   });
        //   lineLayer = new mapvgl.LineLayer({
        //     // style: "road", // road, arrow, normal
        //     width: 3,
        //     color: "blue",
        //     animation: true,
        //     duration: 0.5, // 循环时间2s
        //     trailLength: 0.9, // 拖尾长度占间隔的0.4
        //     interval: 0.2, // 粒子长度占线整体长度的0.2
        //     // enablePicked: true,
        //   });
        // }else{
        lineLayerRode = new mapvgl.LineLayer({
          style: "normal", // road, arrow, normal
          width: item.DevicePipeline.ptype.slice(2, 3) * 1.5,
          color: "skyblue",
          enablePicked: true,
        });
        lineLayer = new mapvgl.LineLayer({
          // style: "road", // road, arrow, normal
          width: item.DevicePipeline.ptype.slice(2, 3) * 1.5,
          color: "blue",
          animation: true,
          duration: 0.5, // 循环时间2s
          trailLength: 0.9, // 拖尾长度占间隔的0.4
          interval: 0.2, // 粒子长度占线整体长度的0.2
          // enablePicked: true,
        });
        // }

        let newWaterRoadLine = [
          {
            geometry: {
              type: "LineString",
              coordinates: [],
            },
          },
        ];
        newWaterRoadLine[0].geometry.coordinates = item.coordinates;
        console.log("newWaterRoadLine", newWaterRoadLine);
        lineLayer.setData(newWaterRoadLine);
        lineLayerRode.setData(newWaterRoadLine);
        view.addLayer(lineLayerRode);
        view.addLayer(lineLayer);
      });
      // let view = new mapvgl.View({
      //   map: this.map,
      // });
      // let lineLayer = new mapvgl.LineLayer({
      //   style: "road", // road, arrow, normal
      //   width: 10,
      //   color: "#70DB93",
      //   enablePicked: true,
      //   onClick: e => {
      //     console.log(e);
      //   }
      // });
      // lineLayer.setData(this.p2AddrssListColor);
      // view.addLayer(lineLayer);
    },
    listenZoomend() {
      let vthis = this;
      this.map.addEventListener("zoomend", function (e) {
        let zoomNum = e.srcElement.zoomLevel;
        vthis.zoom = zoomNum;
        if (Math.floor(zoomNum) == 17) {
          vthis.getP1Point();
          // alert('这是18级图层')
        }
        if (Math.floor(zoomNum) == 15) {
          //   vthis.getP2Line();
          // alert('这是15级图层')
        }
        // console.log(this.zoomLev)
        // console.log(123,e.srcElement.zoomLevel)
        // var ZoomNum = this.map.getZoom();
        // console.log(ZoomNum)
      });
    },
    getP3Window() {
      var marker = new BMapGL.Marker(new BMapGL.Point(108.934679, 34.210952));
      this.map.addOverlay(marker);
      var sContent = `
          <div style='width:190px;text-align: center;margin-top: 0px;'>天安门</div>
          <div style='color:white'><span>设备名称:<span/><span>管线<span/></div>
          <div style='color:white'><span>设备位置:<span/><span>雁塔区大寨路<span/></div>
          <div style='color:white'><span>所属线路:<span/><span>管线运营一号线<span/></div>
          <div style='color:white'><span>故障率:<span/><span>20%<span/></div>
          <div style='color:white'><span>数据更新时间:<span/><span>2023-03-21 11:50<span/></div>
          <div style='width:190px;height:120px'><img id='imgDemo' style='height:100%;width:100%' src="./assets/R-C.png" alt=""></div>
        `;
      var infoWindow = new BMapGL.InfoWindow(sContent);
      marker.addEventListener("click", function () {
        this.openInfoWindow(infoWindow);
        var dom = document.getElementById("imgDemo");
        console.log("dom", dom);
        dom.onload = function () {
          infoWindow.redraw();
        };
      });
    },
    getBottomTable() {
      let monTraffic = document.getElementById("monTraffic");
      let myChart = this.$echarts.init(monTraffic);
      let option = {
        title: {
          text: "月工单数量统计",
          padding: [13, 0, 0, 12],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "shadow",
          },
        },
        grid: {
          top: "15%",
          left: "1.5%",
          right: "3%",
          bottom: "1%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            data: [
              "1月",
              "2月",
              "3月",
              "4月",
              "5月",
              "6月",
              "7月",
              "8月",
              "9月",
              "10月",
              "11月",
              "12月",
            ],
            axisTick: {
              alignWithLabel: true,
            },
            axisLabel: {
              textStyle:{
                color:'#fff',  //坐标的字体颜色
              },
            },
          },
        ],
        yAxis: [
          {
            type: "value",
            axisLabel: {
              textStyle:{
                color:'#fff',  //坐标的字体颜色
              },
            },
          },
        ],
        series: [
          {
            name: "Direct",
            type: "bar",
            barWidth: "60%",
            data: [3, 2, 2, 1, 6, 4, 2, 2, 2, 1, 6, 4],
            // itemStyle: {
            //   normal: {
            //     //这里是重点
            //     color: function (params) {
            //       //注意，如果颜色太少的话，后面颜色不会自动循环，最好多定义几个颜色
            //       var colorList = [
            //         "#FFE850 ",
            //         "#FFE850 ",
            //         "#FFE850 ",
            //         "#FFE850 ",
            //         "#FFE850 ",
            //         "#FFE850 ",
            //         "#FFE850 ",
            //         "#FFE850 ",
            //         "#FFE850 ",
            //         "#FFE850 ",
            //         "#FFE850 ",
            //         "#FFE850 ",
            //       ];
            //       return colorList[params.dataIndex];
            //     },
            //   },
            // },
            itemStyle: {
              normal: {
                color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
                  {
                    // 四个数字分别对应 数组中颜色的开始位置，分别为 右，下，左，上。例如（1,0,0,0 ）代表从右边开始渐
                    // 变。offset取值为0~1，0代表开始时的颜色，1代表结束时的颜色，柱子表现为这两种颜色的渐变。
                    offset: 0,
                    color: "#FF80B0",
                  },
                  {
                    offset: 1,
                    color: "#FFEE50",
                  },
                ]),
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    getbxlczbTable() {
      let bxlczb = document.getElementById("bxlczb");
      let myChart = this.$echarts.init(bxlczb);
      let option = {
        title: {
          text: "报修类型占比",
          padding: [13, 0, 0, 12],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          right: "right",
          padding: [53, 10, 0, 0],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            radius: "50%",
            center: ["40%", "50%"],
            data: [
              { value: 1048, name: "类型1" },
              { value: 735, name: "类型2" },
              { value: 580, name: "类型3" },
              { value: 484, name: "类型4" },
              { value: 300, name: "类型5" },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      myChart.setOption(option);
    },
    getgdtjTable() {
      let gdtj = document.getElementById("gdtj");
      let myChart = this.$echarts.init(gdtj);
      let option = {
        title: {
          text: "工单统计",
          padding: [13, 0, 0, 12],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        tooltip: {
          trigger: "item",
        },
        legend: {
          orient: "vertical",
          right: "right",
          padding: [53, 10, 0, 0],
          textStyle: {
            color: "#fff",
            fontWeight: "normal",
          },
        },
        series: [
          {
            name: "Access From",
            type: "pie",
            center: ["34%", "50%"],
            radius: ["30%", "60%"],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: "center",
            },
            emphasis: {
              label: {
                show: true,
                fontSize: 20,
                fontWeight: "bold",
              },
            },
            labelLine: {
              show: false,
            },
            data: [
              { value: 1048, name: "工单1" },
              { value: 735, name: "工单2" },
              { value: 580, name: "工单3" },
              { value: 484, name: "工单4" },
              { value: 300, name: "工单5" },
            ],
          },
        ],
      };
      myChart.setOption(option);
    },
  },
  watch: {
    zoom: {
      handler(newVal, oldVal) {
        console.log("newVal", newVal);
        console.log("oldVal", oldVal);
      },
    },
  },
  computed: {
    ...mapState("gismanage", ["coordLinat"]),
  },
  async mounted() {
    (this.map = new BMapGL.Map("container")), console.log(this.map);
    var point = new BMapGL.Point(114.673864, 35.183726);
    this.map.centerAndZoom(point, 13);
    this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放
    this.getBottomTable();
    this.getbxlczbTable();
    this.getgdtjTable();
    await this.actionGetCoordLinat();
    // this.getP1Point();
    await this.getP2Line();
    // this.getP3Window()
    // this.listenZoomend();
    
  },
};
</script>
  
<style lang="less" scoped>
::v-deep .BMap_bubble_pop {
  background-color: rgba(24, 76, 86, 0.8) !important;
  width: 190px !important;
}
::v-deep .BMap_bubble_top {
  width: 190px !important;
  padding: 0 !important;
}
::v-deep .BMap_bubble_center {
  display: flex;
  flex-direction: column;
}
iconpark-icon{
  vertical-align: middle;
}
.map {
  height: 100%;
  width: 100%;
  border-radius: 30px;
  overflow: hidden;
  position: relative;
  .maxWidth {
    width: 100%;
    height: 100%;
    .mapOut {
      position: relative;
      width: 49.5%;
      height: 100%;
      z-index: 999;
      #container {
        border-radius: 30px;
        height: 100%;
        width: 100%;
      }
      .fullScreen {
        position: absolute;
        width: 100px;
        height: 45px;
        background-color: rgba(16, 3, 3, 0.5);
        top: 0;
        right: 0;
        cursor: pointer;
        z-index: 99;
        font-size: 16px;
        color: white;
        line-height: 45px;
        border-top-right-radius: 30px;
      }
    }
  }
  .orderRight {
    position: absolute;
    top: 0;
    right: 0;
    width: 49.5%;
    height: 100%;
    border-radius: 30px;
    background-color: #0c323a;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .dcl,
    .ycl,
    .bxlczb,
    .gdtj {
      height: 32%;
      width: 49%;
      background-color: #002127;
      border-radius: 30px;
      margin-bottom: 2%;
    }
    .dcl,
    .ycl {
      display: flex;
      flex-direction: column;
      align-items: center;
      span {
        display: block;
        height: 50px;
        line-height: 50px;
        color: #f49e1d;
      }
      .line {
        width: 400px;
        height: 0px;
        opacity: 1;
        border: 1px solid;
        border-image: linear-gradient(
            90deg,
            rgba(255, 18.000000827014446, 18.000000827014446, 0),
            rgba(244.0000006556511, 158.00000578165054, 29.000000171363354, 1),
            rgba(244.0000006556511, 158.00000578165054, 29.000000171363354, 0)
          )
          1 1;
      }
      .dclCon {
        color: white;
      }
    }
    .ycl {
      span {
        color: #1bf030;
      }
      .line {
        width: 400px;
        height: 0px;
        opacity: 1;
        border: 1px solid;
        border-image: linear-gradient(
            90deg,
            rgba(27.000000290572643, 240.00000089406967, 48.000000938773155, 0),
            rgba(27.000000290572643, 240.00000089406967, 48.000000938773155, 1),
            rgba(27.000000290572643, 240.00000089406967, 48.000000938773155, 0)
          )
          1 1;
      }
      .yclCon {
        color: white;
      }
    }
    .ygdsltj {
      height: 32%;
      width: 100%;
      background-color: #002127;
      border-radius: 30px;
      margin-bottom: 0%;
    }
  }
}
.radar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background-color: red;
  position: relative;
  .ripple {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 1px solid red;
    animation: ripple 2s linear infinite;
  }
}
@keyframes ripple {
  to {
    width: 150px;
    height: 150px;
    opacity: 0;
  }
}
.radar :nth-child(1) {
  animation-delay: 0.666s;
}
.radar :nth-child(2) {
  animation-delay: 1.322s;
}
</style>